<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;box-sizing: border-box;}
			body{
				font-family: "微软雅黑";
				text-align: center;
			}
			table,p,span{
				display: inline-block;
			}
			table{
				width: 500px;
				background-color: rgba(32, 30, 30,0.9)
			}
			tr{
				display: flex;
				flex-wrap: wrap;
			}
			tr>td{
				flex: 0 0 14.285714%;
				line-height: 50px;
				color:#fff;
				cursor: pointer;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>日</td>
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
				<td>五</td>
				<td>六</td>
			</tr>
		<script>
			var year = Number(prompt('请输入年份'));
			var month = Number(prompt('请输入月份'));
			var date1 = Number(prompt('请输入日期'));
			var table = document.querySelector('table');
			if(year > 1900 && month <= 12 && month >= 1){
				document.write("<h1>" + "<p>" + year + "年" + "</p>" + "<span>" + month + "月" + "</span>" + "</h1>");
			}else{
				table.style.display = "none"
				alert("输入错误");
			}
			
			//和
			var sumYear = 0;
			for(var i = 1900;i<year;i++){
				if(i%400 ===0 ||(i%4===0&&i%100!==0)){
					 //闰年能被4整除且不能被100整除，或能被400整除。
					sumYear += 366;
				}else{
					sumYear += 365;
				}
			}
			console.log(sumYear);
			
			
			//月份
			
			for(var i = 0;i<month;i++){
				switch(i){
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						sumYear+=31;
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						sumYear+=30;
						break;
					case 2:
						if(i%400 ===0 ||(i%4===0&&i%100!==0)){
							sumYear+=29;
						}else{
							sumYear+=28;
						}
					
				}
			}
			//一号是星期几
			var week = sumYear % 7  + 1;

			
			var day = 0;
			switch(month){
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12:
					day=31;
					break;
				case 4:
				case 6:
				case 9:
				case 11:
					day=30;
					break;
				case 2:
					if(year%400 ===0 ||(year%4===0&&year%100!==0)){
						day=29;
					}else{
						day=28;
					}
				}
			
			
			//上一个月
			var shangDay = 0;
			var shangMonth = month == 1 ? 12 : month-1;

			
			switch(shangMonth){
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12:
					shangDay=31;
					break;
				case 4:
				case 6:
				case 9:
				case 11:
					shangDay=30;
					break;
				case 2:
					if(year%400 ===0 ||(year%4===0&&year%100!==0)){
						shangDay=29;
					}else{
						shangDay=28;
					}
				}
				document.write("<tr class='con'>")
				for(var i = shangDay - week+1;i<=shangDay;i++){
					document.write("<td style='color: #999;'>" + i + "</td>")
				}

				for(var i = 1;i<=day;i++){
					i == date1 ? document.write("<td style='background: rgba(20, 17, 207,0.5);'>" + i + "</td>") : document.write("<td>" + i + "</td>");
				}

				if(week =>0){
					weiZhi = 42 - day - week;
				}
				for(var i = 1;i<=weiZhi;i++){
					document.write("<td style='color: #999;'>" + i + "</td>")
				}
				document.write("</tr>")
				
				var tdBtn = document.querySelectorAll('.con td')
				for(var i = 0;i<tdBtn.length;i++){
					tdBtn[i].onclick=function(){
						console.log(this.innerText + "日")
						for(var j = 0;j<tdBtn.length;j++){
							tdBtn[j].style.border="1px solid black"
						}
						this.style.border="1px solid #fff"
					}
				}
				
				
				
				
		</script>
		</table>
	</body>
</html>
